<script setup lang="ts">
import * as d3 from "d3";
import { onMounted, ref } from "vue";

// Declare the chart dimensions and margins.
const width = ref(640);
const height = ref(400);
const marginTop = ref(20);
const marginRight = ref(20);
const marginBottom = ref(30);
const marginLeft = ref(40);

// Declare the x (horizontal position) scale.
const initChart = () => {
  const x = d3
    .scaleUtc()
    .domain([new Date("2023-01-01"), new Date("2024-01-01")])
    .range([marginLeft.value, width.value - marginRight.value - 20]);

  // Declare the y (vertical position) scale.
  const y = d3
    .scaleLinear()
    .domain([0, 100])
    .range([height.value - marginBottom.value-20, marginTop.value - 10]);

  // Create the SVG container.
  const svg = d3
    .create("svg")
    .attr("width", width.value - 20)
    .attr("height", height.value - 20);

  // Add the x-axis.
  svg
    .append("g")
    .attr("transform", `translate(0,${height.value - marginBottom.value - 20})`)
    .call(d3.axisBottom(x));

  // Add the y-axis.
  svg
    .append("g")
    .attr("transform", `translate(${marginLeft.value},0)`)
    .call(d3.axisLeft(y));

  return svg;
};

// Append the SVG element.

const containerRef = ref<HTMLDivElement>();

onMounted(() => {
  console.log("containerRef.value======>", containerRef.value);

  const { clientHeight, clientWidth } = containerRef.value!;

  width.value = clientWidth;
  height.value = clientHeight;

  // debugger;
  // containerRef.value?.append(svg.node()!);

  const svg = initChart();

  containerRef.value?.append(svg.node()!);
});
</script>

<template>
  <div
    ref="containerRef"
    class="w-full h-full"
  ></div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
